<template>
    <div>
<!--        <van-search-->
<!--                v-model="userId"-->
<!--                placeholder="输入ID进行查询"-->
<!--                show-action-->
<!--                shape="round"-->
<!--                @search="onSearch"-->
<!--        >-->
<!--            <van-button round type="info" slot="action" @click="onSearch" size="small" color="#FBD489">查询</van-button>-->
<!--        </van-search>-->
        <p>&nbsp;</p>
        <van-tabs type="card" color="#FBD489" title-inactive-color="#A6A6A6" background="#f2f2f2" :border="false"
                  animated>
            <van-tab title="全部">
                <div class="skeleton" v-for="(item, i) in this.info.myTeamIncome">
                    <div class="skeleton-title">
                        <div class="skeleton-title-img">
                            <img :src="item.avatar" alt="">
                        </div>
                        <div class="skeleton-title-details">
                            <p>{{item.nickname}}</p>
                            <p>{{item.time}}</p>
                        </div>
                        <div class="skeleton-title-addmodel">
                            +1模豆
                        </div>
                    </div>
                    <div class="skeleton-content">
                        <p><span>代理级别</span><span>注册会员</span></p>
                        <p><span>电话</span><span>{{item.phone}}</span></p>
                        <p><span>上级推广人</span><span>{{item.parentName}}</span></p>
                    </div>
                </div>
            </van-tab>
            <van-tab title="一级">
                <div class="skeleton" v-for="(item, i) in this.info.myTeamIncome">
                    <div class="skeleton-title">
                        <div class="skeleton-title-img">
                            <img :src="item.avatar" alt="">
                        </div>
                        <div class="skeleton-title-details">
                            <p>{{item.nickname}}</p>
                            <p>{{item.time}}</p>
                        </div>
                        <div class="skeleton-title-addmodel">
                            +1模豆
                        </div>
                    </div>
                    <div class="skeleton-content">
                        <p><span>代理级别</span><span>注册会员</span></p>
                        <p><span>电话</span><span>{{item.phone}}</span></p>
                        <p><span>上级推广人</span><span>{{item.parentName}}</span></p>
                    </div>
                </div>
            </van-tab>
        </van-tabs>

    </div>
</template>

<style scoped>

    .skeleton {
        width: 100%;
        background-color: #ffffff;
        padding: 10px;
        border-bottom: 1px solid #cccccc;
    }

    .skeleton-title {
        height: 60px;
        padding-bottom: 10px;
        border-bottom: 1px solid #cccccc;
        display: flex;
    }

    .skeleton-title-img {
        height: 50px;
        width: 50px;
        background-color: #fff;
        border-radius: 50%;
        overflow: hidden;
    }

    .skeleton-title-img > img {
        width: 100%;
        height: 100%;
    }

    .skeleton-title-details {
        max-width: 60%;
        height: 50px;
        flex-grow: 10;
    }

    .skeleton-title-details > p {
        width: 100%;
        line-height: 25px;
        padding-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .skeleton-title-details > p:nth-of-type(2) {
        font-size: 12px;
        color: #999999;
    }

    .skeleton-title-details > p:nth-of-type(1) {
        font-size: 18px;
        color: #333333;
    }

    .skeleton-title-addmodel {
        flex-grow: 1;
        line-height: 50px;
        color: rgb(226, 65, 106);
        text-align: right;
        font-size: 16px;
        padding-right: 10px;
    }

    .skeleton-content {
        height: 90px;
        padding-top: 5px;
    }

    .skeleton-content > p {
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        color: #666666;
    }

</style>

<script>
    import { myteaminfo } from '@/api/api';
    export default {
        name: "MyTeam",
        data() {
            return {
                userId: undefined,
                info:{}
            }
        },
        methods: {
            onSearch() {

            },

        },
        created() {
            myteaminfo({}).then(res => {
                this.info = res.data.data
                console.log(this.info,'asd')
            })
        }
    }
</script>
